<template >
    <div>
        <div style="float: left">
            <el-input style="width: 150px;float: left"
                      v-model="search2"
                      class="search_name"
                      @keyup.native="onSearch()"
                      placeholder="输入楼栋查询">
            </el-input>
            <el-input style="width: 150px;float: left"
                      v-model="search1"
                      class="search_name"
                      @keyup.native="onSearch()"
                      placeholder="输入业主查询">
            </el-input>
        </div>
        <div class="block" style="float: left;margin-left: 10px">
            <span class="demonstration">收费时间：</span>
            <el-date-picker
                    v-model="value1"
                    type="monthrange"
                    range-separator="至"
                    start-placeholder="开始月份"
                    end-placeholder="结束月份">
            </el-date-picker>
        </div>
        <el-button type="primary" icon="el-icon-search">搜索</el-button>
        <el-button type="primary"  @click="getExcel">导出<i class="el-icon-upload el-icon--right"></i></el-button>
        <div>
            <el-table v-loading="loading"
                      border
                      :summary-method="getSummaries"
                      show-summary :data="users.slice((currentPage-1)*pageSize,currentPage*pageSize)" style="width: 100%; margin-top: 20px;">
                <el-table-column align="center" label="楼栋" prop="tower.tname">

                </el-table-column>
                <el-table-column align="center" label="业主" prop="owner.oname">

                </el-table-column>

                <el-table-column align="center" label="2017年1月" prop="month.mname">
                    <el-table-column align="center" prop="ys" label="应收物业费"></el-table-column>
                    <el-table-column align="center" prop="ss" label="实收物业费"></el-table-column>
                    <el-table-column align="center" prop="ysfj" label="实收物业费分解"></el-table-column>
                    <el-table-column align="center" prop="sjl" label="收缴率"></el-table-column>
                </el-table-column>
            </el-table>
        </div>
        <div class="block" style="float: right">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[3, 6, 9, 12]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Wuye',
        data() {
            return {
                input: '',
                pickerOptions: {
                    shortcuts: [{
                        text: '本月',
                        onClick(picker) {
                            picker.$emit('pick', [new Date(), new Date()]);
                        }
                    }, {
                        text: '今年至今',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date(new Date().getFullYear(), 0);
                            picker.$emit('pick', [start, end]);
                        }
                    }, {
                        text: '最近六个月',
                        onClick(picker) {
                            const end = new Date();
                            const start = new Date();
                            start.setMonth(start.getMonth() - 6);
                            picker.$emit('pick', [start, end]);
                        }
                    }]
                },
                value1: '',
                value2: '',
                search1: '',
                search2: '',
                selectList: {oname: '', oid: ''},
                selectList1: {tname: '', tid: ''},
                selectList2: {mname: '', mid: ''},
                options: [{
                    value: '选项1',
                    label: '101栋'
                }],
                value: '',
                schArr: [], // 分页数据源
                pageSize: 3,
                currentPage: 1,
                total: 0,
                users: {},
                /*tableData: [{
                    date: '2016-05-07',
                    name: '王小虎',
                    province: '上海',
                    city: '普陀区',
                    address: '上海市普陀区金沙江路 1518 弄',
                    zip: 200333
                }]*/
            }
        },
        created() {
            const that = this;
            this.getPages();
            this.axios.get('http://localhost:8082/selectHouse')
                .then(function (response) {
                    console.log(response);
                    that.users = response.data;
                }), this.axios.get('http://localhost:8082/selectOwnerList')
                .then(function (response) {
                    console.log(response);
                    that.selectList = response.data;
                }),
                this.axios.get('http://localhost:8082/selectMonthList')
                    .then(function (response) {
                        console.log(response);
                        that.selectList2 = response.data;
                    }),
                this.axios.get('http://localhost:8082/selectTowerList')
                    .then(function (response) {
                        console.log(response);
                        that.selectList1 = response.data;
                    })
        },
        methods: {
            getExcel() {
                require.ensure([], () => {
                    const { export_json_to_excel } = require('../../router/Export2Excel')
                    const tHeader = ['序号','应收物业费','实收物业费','实收物业费分解','收缴率']
                    const filterVal = [ 'id','ys','ss','ysfj','sjl']
                    const list = this.users
                    const data = this.formatJson(filterVal, list)
                    export_json_to_excel(tHeader, data, '物业费统计')
                })
            },

            formatJson(filterVal, jsonData) {
                return jsonData.map(v => filterVal.map(j => v[j]))
            },
            onSearch() {
                let postData = this.qs.stringify({
                    oname: this.search1,
                    tname: this.search2,
                });
                this.axios({
                    method: 'post',
                    url: 'http://localhost:8082/selectHouse',
                    data: postData
                }).then(response => {
                    this.getPages();
                    this.users = response.data;
                    this.disablePage = true;
                }).catch(error => {
                    console.log(error);
                });
            },
            handleSizeChange(val) {
                this.getPageData();
                console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.getPageData();
                console.log(this.pageSize);
            },
            handleCurrentChange(val) {
                this.getPageData();
                console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.getPageData();
                console.log(this.currentPage);
            },
            getPageData() {
                console.log("是否yes");

                let start = (this.currentPage - 1) * this.pageSize;
                let end = start + this.pageSize;
                this.schArr = this.users.slice(start, end);
                this.total = this.users.length;
            },
            getPages() {
                let postData = this.qs.stringify({
                    oname: this.search1,
                    tname: this.search2,
                });
                this.axios({
                    method: 'post',
                    url: 'http://localhost:8082/getHouseCount',
                    data: postData
                }).then(response =>
                {
                    this.total = response.data;
                }).catch(error =>
                {
                    console.log(error);
                });
            },
        }
    }
</script>
